<template>
	<div class="faqInside1">
    <div class="title">
      <div class="content">{{$t('FAQ.src')}}</div>
    </div>
    <div class="content">
      <el-row :gutter="20">
        <el-col :span="8">
          <el-card>
            <div class="cardImg">
              <!--<img src="./images1/data.png" style="width: 202px;height:225px;" @click="dialogData('dialogVisible1')">-->
              <span class="icon-pic">
                <i class="iconfont icon-icon-test3" @click="dialogData('dialogVisible1')"></i>
              </span>
            </div>
            <div class="card-title">{{$t('FAQ.DataSource.title')}}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div class="cardImg">
              <!--<img src="./images1/Diagram.png" style="width: 239px;height:220px;margin-top:14px;" @click="dialogData('dialogVisible2')">-->
              <span class="icon-pic">
                <i class="iconfont icon-icon-test4" @click="dialogData('dialogVisible2')"></i>
              </span>
            </div>
            <div class="card-title">{{$t('FAQ.echart.title')}}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div class="cardImg">
              <!--<img src="./images1/Search.png" style="width: 219px;height:222px;margin-top:15px;" @click="dialogData('dialogVisible3')">-->
              <span class="icon-pic">
                <i class="iconfont icon-icon-test2" @click="dialogData('dialogVisible3')"></i>
              </span>
            </div>
            <div class="card-title">{{$t('FAQ.search.title')}}</div>
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="elRow">
        <el-col :span="8">
          <el-card>
            <div class="cardImg">
              <!--<img src="./images1/Customer.png" style="width: 218px;height:229px;" @click="dialogData('dialogVisible4')">-->
              <span class="icon-pic">
                <i class="iconfont icon-icon-test1" @click="dialogData('dialogVisible4')"></i>
              </span>
            </div>
            <div class="card-title">{{$t('FAQ.customer.title')}}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div class="cardImg">
              <!--<img src="./images1/RFM(Customer Value).png" style="width: 223px;height:223px;" @click="dialogData('dialogVisible5')">-->
              <span class="icon-pic">
                <i class="iconfont icon-icon-test6" @click="dialogData('dialogVisible5')"></i>
              </span>
            </div>
            <div class="card-title">{{$t('FAQ.customerValue.title')}}</div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card>
            <div class="cardImg">
              <!--<img src="./images1/Others.png" style="width: 333px;height:218px;" @click="dialogData('dialogVisible6')">-->
              <span class="icon-pic">
                <i class="iconfont icon-icon-test5" @click="dialogData('dialogVisible6')"></i>
              </span>
            </div>
            <div class="card-title">{{$t('FAQ.others.title')}}</div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-dialog :visible.sync="dialogVisible1">
      <div class="dialogTitle">
        <div class="content">
          {{$t('FAQ.DataSource.title')}}
        </div>
      </div>
      <div class="dialogContent">
        <div class="qa" v-for="item in $t('FAQ.DataSource.question')">
          <div class="question">
            {{item.q}}
          </div>
          <img src="./images1/A.png" style="margin-top:20px;margin-right:3px;">
          <div class="answer" v-html="item.a.answer" style="margin-bottom:30px;display:inline-block;width:1074px;vertical-align:top;">
          </div>
          <div class="answer1" v-html="item.a.url">
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible2">
      <div class="dialogTitle">
        <div class="content">
          {{$t('FAQ.echart.title')}}
        </div>
      </div>
      <div class="dialogContent">
        <div class="qa" v-for="item in $t('FAQ.echart.question')">
          <div class="question">
            {{item.q}}
          </div>
          <img src="./images1/A.png" style="margin-top:20px;margin-right:3px;">
          <div class="answer" v-html="item.a.answer" style="margin-bottom:30px;display:inline-block;width:1074px;vertical-align:top;">
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible3">
      <div class="dialogTitle">
        <div class="content">
          {{$t('FAQ.search.title')}}
        </div>
      </div>
      <div class="dialogContent">
        <div class="qa" v-for="item in $t('FAQ.search.question')">
          <div class="question">
            {{item.q}}
          </div>
          <div style="margin-bottom:20px;">
            <img src="./images1/A.png" style="margin-top:20px;margin-right:3px;"><div class="answer" v-html="item.a" style="display:inline-block;width:1074px;vertical-align:top;">
            </div>
            <div class="answer2" style="margin-bottom:30px;display:block;">
              <span class='answer2_list' v-for="item1 in item.b" v-html="item1.aList">
              </span>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible4">
      <div class="dialogTitle">
        <div class="content">
          {{$t('FAQ.customer.title')}}
        </div>
      </div>
      <div class="dialogContent">
        <div class="qa" v-for="item in $t('FAQ.customer.question')">
          <div class="question">
            {{item.q}}
          </div>
          <img src="./images1/A.png" style="margin-top:20px;margin-right:3px;">
          <div class="answer" v-html="item.a" style="display:inline-block;width:1074px;vertical-align:top;">
          </div>
          <div class="answer2">
            <span class='answer2_list' v-for="item1 in item.b" v-html="item1.aList">
            </span>
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible5">
      <div class="dialogTitle">
        <div class="content">
          {{$t('FAQ.customerValue.title')}}
        </div>
      </div>
      <div class="dialogContent">
        <div class="qa">
<!--           <div class="question">
            {{item.q}}
          </div> -->
          <img src="./images1/A.png" style="position: relative;top:-63px;">
          <div class="answ">
            <div class="answer3">
              {{$t('FAQ.customerValue.question.logical.label')}}
            </div>
            <div class="answer3">
              {{$t('FAQ.customerValue.question.logical.statisTime')}}
            </div>
            <div class="answer3">
              {{$t('FAQ.customerValue.question.logical.distri')}}
            </div>
            <div class="answer3">
              {{$t('FAQ.customerValue.question.logical.rent')}}
            </div>
          </div>
          <div>
            <img src="./images1/FAQ-1_03.png" v-show="$t('FAQ.customerValue.question.logical.imgUrl') === 'en'" style="margin-bottom:20px;margin-top:13px;">
            <img src="./images1/FAQ_ch.png" v-show="$t('FAQ.customerValue.question.logical.imgUrl') === 'zh'" style="margin-bottom:20px;margin-top:13px;">
          </div>
          <img src="./images1/A.png" style="position: relative;top:-17px;">
          <div class="answ">
            <div class="answer3">
              {{$t('FAQ.customerValue.question.rfm.label')}}
            </div>
            <div class="answer3">
              {{$t('FAQ.customerValue.question.rfm.statisTime')}}
            </div>
          </div>
          <div>
            <img src="./images1/FAQ_03.png" alt="" v-show="$t('FAQ.customerValue.question.logical.imgUrl') === 'en'" style="margin-top: 13px;">
            <img src="./images1/FAQ-1_ch.png" alt="" v-show="$t('FAQ.customerValue.question.logical.imgUrl') === 'zh'" style="margin-top: 13px;">
          </div>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible6">
      <div class="dialogTitle">
        <div class="content">
          {{$t('FAQ.others.title')}}
        </div>
      </div>
      <div class="dialogContent">
        <div class="qa" v-for="item in $t('FAQ.others.question')">
          <div class="question">
            {{item.q}}
          </div>
          <img src="./images1/A.png" style="margin-top:20px;margin-right:3px;">
          <div class="answer answer6" v-html="item.a" style="display:inline-block;width:1074px;vertical-align:top;">
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dialogVisible1: false,
        dialogVisible2: false,
        dialogVisible3: false,
        dialogVisible4: false,
        dialogVisible5: false,
        dialogVisible6: false,
        faqData: '',
        dialogTitle: ''
      }
    },
    computed: {
    },
    methods: {
      reset () {
        this.dialogVisible1 = false
        this.dialogVisible2 = false
        this.dialogVisible3 = false
        this.dialogVisible4 = false
        this.dialogVisible5 = false
        this.dialogVisible6 = false
      },
      dialogData (data) {
        this.reset()
        this[data] = true
      }
    },
    mounted () {
      this.faqData = this.$t('FAQ.DataSource.question')
    }
  }
</script>
<style lang="scss" scoped>
.faqInside1{
  padding: 0 46px;
  .el-dialog__header{
    padding:0;
  }
  .title{
    width: 100%;
    text-align: center;
    .content{
      margin: 10px auto;
      font-family:OpenSansShin;
      font-size:30px;
      color:#333;
      font-weight: bold;
    }
    .content:after, .content:before{
      content: '';
      display: inline-block;
      width:50px;
      height:5px;
      margin-left:10px;
      margin-right:10px;
      margin-bottom:8px;
      background: #0090e9;
    }
  }
  .content{
    .elRow{
      margin-top:20px;
    }
    .card-title{
      text-align: center;
      font-family:OpenSansShin;
      color:#666;
      font-size: 20px;
      font-weight: bold;
      margin-bottom:30px;
    }
    .cardImg{
      text-align: center;
      width:100%;
      margin-top: -10px;
      /*height:252px;*/
      /*img{*/
        /*cursor:pointer;*/
      /*}*/
    }
  }
  .dialogTitle{
    width: 100%;
    text-align: center;
    .content{
      margin: 0px auto;
      font-family: 'MicrosoftYaHei-Bold';
      font-size:20px;
      color:#000;
      font-weight: bold;
    }
    .content:after, .content:before{
      content: '';
      display: inline-block;
      width:50px;
      height:5px;
      margin-left:10px;
      margin-right:10px;
      margin-bottom:5px;
      background: #0090e9;
    }
  }
  .dialogContent{
    .question{
      font-family: 'MicrosoftYaHei-Bold';
      font-size: 18px;
      color:#000;
      font-weight: bold;
    }
    .question:before{
      content: url('./images1/Q.png');
      display: inline-block;
      position: relative;
      top:3px;
    }
    .answer{
      font-family: 'MicrosoftYaHei';
      font-size: 14px;
      color:#666;
      margin-top:20px;
      margin-bottom:50px;
    }
    .answer6{
      margin-bottom:30px;
    }
    .answer1{
      font-family: 'MicrosoftYaHei';
      font-size: 14px;
      color:#666;
      margin-top:-30px;
      margin-bottom:30px;
      margin-left:33px;
    }
    .answ{
      display: inline-block;
      color:#666;
      font-family: 'MicrosoftYaHei';
    }
    .answer2{
      margin-top: -38px;
      margin-bottom: 20px;
      .answer2_list{
        display: block;
        margin-left:30px;
      }
      .answer2_list:before{
        content: '';
        display: inline-block;
        width:10px;
        height:10px;
        border-radius: 50%;
        background: #999;
        margin-right:5px;
      }
    }
/*    .answer:before{
      content: url('./images1/A.png');
      display: inline-block;
      position: relative;
      top:3px;
      margin-right:3px;
    }*/
  }
  .content {
    .el-card {
      height: 230px;
      .iconfont {
        font-size: 150px;
        cursor:pointer;
        //渐变
        //background-image: -webkit-gradient(linear, left center, right center, from(rgba(176, 31, 184, 1)), to(rgba(255, 89, 76, 1)));
        background: -webkit-linear-gradient(left, #45BCD1 , #7BDFEA); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #45BCD1, #7BDFEA); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #45BCD1, #7BDFEA); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #45BCD1 , #7BDFEA); /* 标准的语法 */
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text!important;
      }
    }
    .card-title {
      margin-top: 15px;
    }
    .icon-pic {
      display: inline-block;
      width: 152px;
      height: 156px;
    }
  }
}
</style>
